<script setup>
import {ref} from 'vue'

const model=defineModel()

//点击弹窗其它区域，关闭弹窗
const dialog=ref(null)
function handleClose(e){
    if(!dialog.value.contains(e.target)){
        model.value=false
    }
}
</script>

<template>
<transition name="el-fade-in-linear">
    <div @click.stop="handleClose($event)" class="parent">
        <div ref="dialog" class="child">

        </div>

    </div>
</transition>
</template>

<style scoped>
.parent{
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color: rgba(128,128,128,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
}
.child{
    width:500px;
    height:auto;
    min-height:300px;
    background-color: white;
    border-radius:10px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}
</style>